<template>
  <!-- <div class="quality-recommend">
    <div class="slider-banner swiper">
      <swiper class="swiper-wrapper" :options="RecommendSwiper">
        <swiperSlide
          class="swiper-slide"
          v-for="(item, index) in imgUrls"
          :key="index"
        >
          <img :src="item.img" class="slide-image" />
        </swiperSlide>
      </swiper>
      <div class="swiper-pagination"></div>
    </div>
    <div class="title acea-row row-center-wrapper">
      <div class="line"></div>
      <div class="name">
        <span class="iconfont" :class="icon"></span>{{ name }}
      </div>
      <div class="line"></div>
    </div>
    <GoodList :good-list="goodsList" :is-sort="false"></GoodList>
  </div> -->

  <el-container>
      <el-header  style="padding: 0;"  height="171px">
        <HomeNavigation></HomeNavigation>
        <SearchBox></SearchBox>
        <ClassNavigation></ClassNavigation>
      </el-header>
      <el-main class="hotNew">
        <div class="h-box">
          <!-- 面包屑 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <GoodList :good-list="goodsList" :is-sort="false"></GoodList>
        </div>
      </el-main>
      <el-footer  style="padding: 0;">
        <Foot></Foot>
      </el-footer>
  </el-container>


</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "@assets/css/swiper.min.css";
import GoodList from "@components/GoodList";
import { getGroomList } from "@api/store";
import HomeNavigation from "@components/HomeNavigation";
import SearchBox from "@components/SearchBox";
import ClassNavigation from "@components/ClassNavigation";
import Foot from "@components/Foot";



export default {
  name: "HotNewGoods",
  components: {
    swiper,
    swiperSlide,
    GoodList,
    HomeNavigation,
    SearchBox,
    ClassNavigation,
    Foot
  },
  props: {},
  data: function() {
    return {
      imgUrls: [],
      goodsList: [],
      name: "",
      icon: "",
      RecommendSwiper: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      }
    };
  },
  mounted: function() {
    this.titleInfo();
    this.getIndexGroomList();
  },
  methods: {
    titleInfo: function() {
      let type = this.$route.params.type;
      if (type === "1") {
        this.name = "精品推荐";
        this.icon = "icon-jingpintuijian";
        document.title = "精品推荐";
      } else if (type === "2") {
        this.name = "热门榜单";
        this.icon = "icon-remen";
        document.title = "热门榜单";
      } else if (type === "3") {
        this.name = "首发新品";
        this.icon = "icon-xinpin";
        document.title = "首发新品";
      }
    },
    getIndexGroomList: function() {
      let that = this;
      let type = this.$route.params.type;
      console.log(type);
      getGroomList(type)
        .then(res => {
          that.imgUrls = res.data.banner;
          that.goodsList = res.data.list;
          console.log(res.data.list);
        })
        .catch(function(res) {
          this.$dialog.toast({ mes: res.msg });
        });
    }
  }
};
</script>
<style scoped>
  .hotNew {
    background-color: #f5f5f5;
  }
  .hotNew .h-box {
    width: 1090px;
    margin: 0 auto;
    background-color: #f5f5f5;
  }
</style>